import React, { useState } from 'react'
import {
  Form,
  Input,
  Button,
  Dialog,
  TextArea,
  DatePicker,
  Selector,
  Slider,
  Stepper,
  Switch,
} from 'antd-mobile'
import axios from '../../api/index'
import { useCountDown } from 'ahooks';
import { useNavigate } from 'react-router-dom';
function index() {
  const [form]=Form.useForm()
   const [targetDate, setTargetDate] = useState(); 
  const [countdown] = useCountDown({
    targetDate, 
  });
  const nav=useNavigate()
  const yzm=()=>{
    setTargetDate(Date.now() + 60000);
    const tel=form.getFieldValue('tel')
    console.log(tel);
    axios.get('/login/code',{params:{tel}}).then(res=>{
      console.log(res);
      form.setFieldValue('telCode',res.data.data)
    })
  }
  const onFinish=(val)=>{
    console.log(val)
    axios.post('/login/tel',val).then(res=>{
      console.log(res); 
      nav('/')
    })
  }
  return (
    <div>
      <Form
      form={form}
      onFinish={onFinish}
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      > 
        <Form.Item
          name='tel'
          label='手机号'
          rules={[{ required: true, message: '手机号不能为空' },
            {pattern:/^1[3-9]\d{9}$/,message:'手机号格式不正确'}]}
        >
          <Input onChange={console.log} placeholder='请输入手机号' />
        </Form.Item>
        <Form.Item
          name='telCode'
          label='验证码'
          rules={[{ required: true, message: '验证码不能为空' }]}
          extra={<Button onClick={yzm} disabled={countdown !== 0}>
             {countdown === 0 ? '获取验证码' : `还要${Math.round(countdown / 1000)}秒`}
          </Button>}
        >
          <Input onChange={console.log} placeholder='请输入验证码' />
        </Form.Item>
        </Form>
    </div>
  )
}

export default index